<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;

            /*
                通过transition属性，实现过渡效果。
                （1）先指定元素在页面加载完成时的初始状态。
                （2）再指定元素在某种事件的触发下，要达到的状态。
                （3）定义过渡效果。
            */
            /*transition: all 2s linear 5s;*/

            /*指定实现过渡效果的属性*/
            transition-property: width;

             /*指定过渡时间，以秒为单位*/
            transition-duration: 2s;

            /*设置过渡时的速度曲线*/
            transition-timing-function: linear;

            /*延迟*/
            transition-delay: 2s;
        }
        div:hover{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    
    <div></div>
</body>
</html>